<template>
	<wsPage title="商户入驻申请">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="商户名称">
						<Input v-model="queryForm.shop" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="申请人邮箱">
						<Input v-model="queryForm.email" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="申请人">
						<Input v-model="queryForm.linkman" placeholder="请输入"></Input>
					</FormItem>
				</Form>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

		<!--审核弹框-->
		<wsModal v-model="auditModal.show" ok-text="审核" title="商户入驻申请审核" @on-ok="auditModalOk" @on-cancel="auditModalCancel">
			<Alert show-icon>
				操作提示
				<template slot="desc">
					审核通过后，会以申请人的邮箱作为登录名称创建商户登录账号，密码会发送到该申请邮箱.
				</template>
			</Alert>
			<Form ref="auditForm" :model="auditModal.form" :rules="auditModal.validate" :label-width="100">
				<FormItem label="审核状态" prop="aduitStatus" required>
					<Select v-model="auditModal.form.aduitStatus" placeholder="请选择">
						<Option :value="1">通过</Option>
						<Option :value="2">驳回</Option>
					</Select>
				</FormItem>
				<FormItem label="审核意见" prop="auditContent">
					<Input v-model="auditModal.form.auditContent" type="textarea"></Input>
				</FormItem>
			</Form>
		</wsModal>

		<!--申请入驻详情-->
		<wsModal v-model="detailModal.show" title="查看详情" @on-ok="detailModalCancel" @on-cancel="detailModalCancel" :width="800">
			<Row style="min-height: 35px;line-height: 35px;">
				<Col span="12" class="detail-col">
					<span>申请人：</span>
				</Col>
				<Col span="12">
					<span>{{detailForm.linkman}}</span>
				</Col>

				<Col span="12" class="detail-col">
					<span>所在国家：</span>
				</Col>
				<Col span="12">
					<span>{{detailForm.countryName}}</span>
				</Col>

				<Col span="12" class="detail-col">
					<span>手机号：</span>
				</Col>
				<Col span="12">
					<span>+{{detailForm.code}}{{detailForm.telephone}}</span>
				</Col>
				<Col span="12" class="detail-col">
					<span>邮箱：</span>
				</Col>
				<Col span="12">
					<span>{{detailForm.email}}</span>
				</Col>
				<Col span="12" class="detail-col">
					<span>货币类型：</span>
				</Col>
				<Col span="12">
					<span>{{detailForm.currencySymbol}}</span>
				</Col>
				<Col span="12" class="detail-col">
					<span>详细地址：</span>
				</Col>
				<Col span="12">
					<span>{{detailForm.location}}</span>
				</Col>
				<Col span="12" class="detail-col">
					<span>所在地区：</span>
				</Col>
				<Col span="12">
					<span>{{detailForm.area}}</span>
				</Col>
				<Col span="12" class="detail-col">
					<span>申请日期：</span>
				</Col>
				<Col span="12">
					<span>{{detailForm.createDate}}</span>
				</Col>
				
			</Row>
			<!-- <Row style="height: 250px;line-height: 150px;"> -->
				<!-- <Col span="6" class="detail-col">
					<span>公司地址：</span>
				</Col>
				<Col span="6">
					<span>{{detailForm.location ? detailForm.location : '未填写地址哦'}}</span>
				</Col>
				<Col span="6" class="detail-col" style="height: 160px;">
					<span>公司营业执照：</span>
				</Col> -->
				<!-- <Col span="6">
					<div style="width: 160px; height: 160px; border: 1px solid #CCCCCC; padding: 3px;"><img :src="detailForm.licenseUrl" width="150px" height="150px"> </div>
				</Col> -->
			<!-- </Row> -->
		</wsModal>
	</wsPage>
</template>

<script>
	export default {
		data() {
			return {
				queryForm: {
					shop: '',
					email: '',
					linkman: ''
				},
				table: {
					columns: [{
							title: '商户名称',
							key: 'shop',
							align: 'center'
						},
						{
							title: '货币类型',
							key: 'currencySymbol',
							align: 'center'
						},
						{
							title: '申请人',
							key: 'linkman',
							align: 'center'
						},
						{
							title: '手机号',
							key: 'telephone',
							align: 'center'
						},
						{
							title: '所在国家',
							key: 'countryName',
							align: 'center'
						},
						{
							title: '邮箱',
							key: 'email',
							align: 'center'
						},
						{   title:'申请日期',
							key: 'createDate',
							align: 'center'
						},
						{
							title: '申请状态',
							key: 'status',
							align: 'center',
							render: (h, params) => {
								return h('Tag', {
									props: {
										type: 'border',
										color: params.row.status === 1 ? 'blue' : params.row.status === 2 ? 'green' : 'red'
									}
								}, this.checkStatus(params.row.status))
							}
						},
						{
							title: '操作',
							width: 160,
							fixed: 'right',
							align: 'center',
							render: (h, params) => {
								let childs_ = [];
								if(params.row.status == 1) {
									let c2 = h('Button', {
										props: {
											type: 'text',
											size: 'small'
										},
										on: {
											click: () => {
												this.auditMerchant(params.row.id, params.row.status);
											}
										}
									}, "审核");
									childs_.push(c2);
								}
								let c1 = h('Button', {
									props: {
										type: 'text',
										size: 'small'
									},
									on: {
										click: () => {
											this.queryDetail(params.row.id);
											this.detailModal.show = true;
										}
									}
								}, "查看详情");
								childs_.push(c1);
								return h('div', childs_)
							}
						}
					],

					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				detailForm: {},
				detailModal: {
					show: false
				},
				//审核弹框
				auditModal: {
					show: false,
					form: {
						applyRecordId: '',
						aduitStatus: 1,
						auditContent: ''
					},
					validate: {
						auditContent: [{
							required: true,
							message: '审核意见必须输入',
							trigger: 'blur'
						}]
					}
				},
				payDepositModal: {
					show: false,
					form: {
						id: '',
						deposit: ''
					}
				},
				clickSave: false
			}
		},
		computed: {

		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 判断状态
			 */
			checkStatus(status) {
				if(status == 1) return "待审核";
				if(status == 2) return "审核通过";
				if(status == 3) return "审核驳回";
				if(status == 4) return "资料待补全";
			},
			//根据操作调用不同回调函数
			auditMerchant(applyRecordId, status) {
				if(status == 1) {
					this.auditModal.form.applyRecordId = applyRecordId;
					this.auditModal.show = true;
				}
			},
			init() {
				this.clickSave = false;
				this.query();
			},
			//刷新
			refresh() {
				this.queryForm.shop = '';
				this.queryForm.email = '';
				this.queryForm.linkman = '';
				this.table.page.pageNum = 1;
				this.table.page.pageSize = 10;
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.get('/ws/ms/merchant/applyrecords/' + pageNum + '/' + pageSize, {
					params: this.queryForm
				}).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 审核的弹框取消操作
			 */
			auditModalCancel() {
				this.$refs['auditForm'].resetFields();
				this.auditModal.show = false;
				this.clickSave = false;
			},
			/**
			 * 审核的弹框确认操作
			 */
			auditModalOk() {
				this.$refs['auditForm'].validate((valid) => {
					if(valid) {
						this.audit();
					}
				});
			},
			/**
			 * 审核操作
			 */
			audit() {
				if(this.clickSave) {
					this.$Message.warning('请不要重复点击');
					return;
				}
				this.clickSave = true;
				const _this = this;
				this.axios.put('/ws/ops/merchant/audit', _this.auditModal.form).then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('操作成功');
						_this.$refs['auditForm'].resetFields();
						_this.auditModal.show = false;
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('操作失败:' + message_);
					}
				});
			},

			detailModalCancel() {
				this.detailModal.show = false;
			},
			//详情
			queryDetail(rowId) {
				const _this = this;
				this.axios.get('/ws/ms/merchantApplyRecords/' + rowId).then(response => {
					var res = response.data;
					console.log(res);
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.detailForm = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			}

		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	
	.layout-content-title {
		text-align: right;
		margin-right: 20px;
	}
	
	.layout-content-main {
		padding: 20px;
		float: left;
		justify-content: space-around;
		font-size: 14px;
	}
	
	.demo-img {
		width: 150px;
		height: 150px;
	}
	
	.detail-col {
		text-align: right;
		padding-right: 15px;
		/*background-color: #f3f3f3;*/
	}
</style>